<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test_debounce</title>
</head>
<body>
1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>
1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>
1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>
1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>
1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>1 <br> 2 <br>
<script>

// let timer = null
//
// console.log(`timer ==> `, timer)
//
// timer = setTimeout(() => {console.log(111)},200)
//
// console.log(`timer ==> `, timer)
//
// clearTimeout(timer)
//
// console.log(`timer ==> `, timer)
//
// setTimeout(() => {
//   console.log(`timer ==> `, timer)
// },1000)


// 防抖函数
// immediate 表示第一次是否立即执行
function debounce(fn, wait = 50, immediate) {
  let timer = null
  return function(...args) {
    if (timer) {
      clearTimeout(timer)
      // timer = null
    }
// ------ 新增部分 start ------
// immediate 为 true 表示第一次触发后执行
// timer 为空表示首次触发
    if (immediate && !timer) {
      fn.apply(this, args)
    }
// ------ 新增部分 end ------
    timer = setTimeout(() => {
      fn.apply(this, args)
      timer = null
    }, wait)
  }
}
// DEMO
// 执行 debounce 函数返回新函数
const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000, false)
// 第一次触发 scroll 执行一次 fn，后续只有在停止滑动 1 秒后才执行函数 fn
document.addEventListener('scroll', betterFn)
</script>
</body>
</html>
